// ================获取文章类别数据=======================
let layer = layui.layer
let form = layui.form

function getArticleCate() {
  axios({
    method: 'get',
    url: '/my/article/cates',
  }).then(({ data: { data } }) => {
    let htmlStr = data.map(item => {
      return `
            <tr>
                <td>${item.name}</td>
                <td>${item.alias}</td>
                <td>
                    <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${item.Id}">编辑</button>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete" data-id="${item.Id}">删除</button>
                </td>
            </tr>
           `
    }).join('')
    $('#tbody').html(htmlStr)
  })
}
getArticleCate()

// ================点击添加按钮=======================
let addFormStr = `
    <form id="addForm" class="layui-form">
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
    </form>`

let indexAddForm
$('#btnAddCate').on('click', function () {
  indexAddForm = layer.open({
    content: addFormStr,
    type: 1,
    title: '添加文章类别',
    area: ['500px', '250px'],
  })
})

// 提交
$('body').on('submit', '#addForm', function (e) {
  e.preventDefault()
  let data = $(this).serialize()

  axios.post('/my/article/addcates', data)
    .then(({ data: { status, message } }) => {
      if (status !== 0) {
        return layer.msg(message)
      }
      // console.log(res)
      layer.close(indexAddForm)
      getArticleCate()
      layer.msg('新增文章成功')
    })

})

// ================编辑功能=======================
// 编辑弹出框
let editFormStr = `
    <form id="editForm" class="layui-form" lay-filter="editForm">
         <!-- 存id -->
        <div class="layui-form-item layui-hide">
          <label class="layui-form-label">Id</label>
          <div class="layui-input-block">
            <input type="text" name="Id" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
          </div>
        </div>
    </form>
`
let indexEditForm

$('#tbody').on('click', '.btn_edit', function () {
  // 获取id值
  let Id = $(this).attr('data-id')
  // console.log(Id)
  axios.get('/my/article/cates/' + Id).then((res) => {
    // console.log(res)
    form.val("editForm", res.data.data);
  })

  indexEditForm = layer.open({
    content: editFormStr,
    type: 1,
    title: '编辑文章类别',
    area: ['500px', '250px'],
  })
})

// 更新
$('body').on('submit', '#editForm', function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  console.log(data)
  axios.post('/my/article/updatecate', data).then((res) => {
    // console.log(res)
    if (res.data.status !== 0) {
      return layer.msg(res.data.message)
    }
    layer.close(indexEditForm)
    getArticleCate()
    layer.msg('更新信息成功')
  })
})

// 删除
$('#tbody').on('click', '.btn_delete', function () {
  let id = $(this).attr('data-id')
  axios.get('/my/article/deletecate/' + id).then(({ data }) => {
    console.log(data)

    if (data.status !== 0) {
      return layer.msg(data.message)
    }
    layer.msg(data.message)
    getArticleCate()
  })
})
